<template>
  <div class="favorite-box">
    {{ n }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      n: 10,
    };
  },
  methods: {
    add(v) {
      this.n += v;
    }
  },
  created() {
    // 注册事件
    window.eventBus.$on('add', this.add);
  },
  beforeDestroy() {
    // 注销事件
    window.eventBus.$off('add', this.add);
  }
};
</script>

<style lang="sass">
  .favorite-box
    position: fixed
    top: 5px
    right: 5px
    width: 30px
    line-height: 30px
    background: tomato
    color: white
    border-radius: 50%
    text-align: center
</style>
